<template>
  <view class="contact-container" @click="closeFriendActionModal">
    <!-- 个人信息栏 -->
    <view class="header-section">
      <view class="header-left">
        <view class="header-avatar" @click="toggleSidebar">
          <image class="avatar" :src="userAvatar" mode="aspectFill" />
        </view>
        <text class="header-title">联系人</text>
      </view>
      <view class="header-right">
        <view class="add-contact-btn" @click="addContact">
          <text class="add-icon" @click="openAddContact">👤+</text>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input class="search-input" placeholder="搜索联系人" v-model="searchText" @input="handleSearch" />
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-section">
      <view class="function-item" @click="openNewFriends">
        <view class="function-icon new-friends">👥</view>
        <text class="function-text">新的朋友</text>
        <view class="function-badge" v-if="newFriendsCount > 0">
          <text class="badge-text">{{ newFriendsCount }}</text>
        </view>
        <text class="arrow">></text>
      </view>
      <view class="function-item" @click="openGroupChats">
        <view class="function-icon group-chats">💬</view>
        <text class="function-text">群聊</text>
        <text class="arrow">></text>
      </view>
      <view class="function-item" @click="openTags">
        <view class="function-icon tags">🏷️</view>
        <text class="function-text">标签</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-section" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-section" v-else-if="!loading && friendsList.length === 0">
      <text class="empty-text">暂无好友</text>
      <text class="empty-hint">点击右上角添加好友</text>
    </view>

    <!-- 联系人列表 -->
    <view class="contact-list" v-else>
      <view class="contact-group" v-for="(group, index) in filteredContacts" :key="index">
        <view class="group-header">
          <text class="group-title">{{ group.letter }}</text>
        </view>
        <view class="contact-item" v-for="friend in group.contacts" :key="friend.userId" @click.stop="openContact(friend, $event)">
          <view class="contact-avatar">
            <image class="avatar" :src="friend.avatar || '/static/logo.png'" mode="aspectFill" />
            <view class="status-indicator" :class="{ 'online': friend.status === 1, 'offline': friend.status === 0 }"></view>
          </view>
          <view class="contact-info">
            <text class="contact-name">{{ friend.nickName }}</text>
            <text class="contact-status">{{ getUserStatusText(friend.status) }}</text>
          </view>
          <!-- 好友操作下拉框 -->
          <view class="action-dropdown" v-if="showFriendActionModal && selectedFriend?.userId === friend.userId" @click.stop>
            <view class="action-item" @click="startChat(selectedFriend!)">
              <text class="action-icon">💬</text>
              <text class="action-text">发起聊天</text>
            </view>
            <view class="action-item delete" @click="deleteFriend(selectedFriend!)">
              <text class="action-icon">🗑️</text>
              <text class="action-text">删除好友</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 好友申请弹窗 -->
    <view class="friend-request-modal" v-if="showFriendRequestModal" @click="closeFriendRequestModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">好友申请</text>
          <view class="close-btn" @click="closeFriendRequestModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        
        <view class="modal-body">
          <!-- 加载状态 -->
          <view class="loading-state" v-if="requestsLoading">
            <text class="loading-text">加载中...</text>
          </view>
          
          <!-- 空状态 -->
          <view class="empty-requests" v-else-if="friendRequests.length === 0">
            <text class="empty-icon">📭</text>
            <text class="empty-text">暂无好友申请</text>
          </view>
          
          <!-- 申请列表 -->
          <view class="request-list" v-else>
            <view class="request-item" v-for="request in friendRequests" :key="request.id">
              <view class="request-avatar">
                <image class="avatar" :src="request.avatar || '/static/logo.png'" mode="aspectFill" />
              </view>
              <view class="request-info">
                <text class="request-name">{{ request.nickName }}</text>
                <text class="request-email">{{ request.email }}</text>
                <text class="request-message" v-if="request.message">{{ request.message }}</text>
                <text class="request-time">{{ formatTime(request.createdAt) }}</text>
              </view>
              <view class="request-actions">
                <view class="action-btn reject" @click="handleFriendRequest(request.id, 'reject')">
                  <text class="btn-text">拒绝</text>
                </view>
                <view class="action-btn accept" @click="handleFriendRequest(request.id, 'accept')">
                  <text class="btn-text">同意</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 侧边栏遮罩 -->
    <view class="sidebar-overlay" v-if="showSidebar" @click="closeSidebar"></view>
    
    <!-- 侧边栏 -->
    <view class="sidebar" :class="{ 'sidebar-open': showSidebar }">
      <view class="sidebar-header">
        <view class="sidebar-avatar">
          <image class="avatar" :src="userAvatar" mode="aspectFill" />
        </view>
        <view class="sidebar-user-info">
          <text class="sidebar-username">{{ userName }}</text>
          <text class="sidebar-email">{{ userInfo?.email || '' }}</text>
        </view>
      </view>
      
      <view class="sidebar-content">
        <view class="sidebar-item" @click="editProfile">
          <text class="sidebar-icon">👤</text>
          <text class="sidebar-text">编辑个人信息</text>
          <text class="sidebar-arrow">></text>
        </view>
        
        <view class="sidebar-item" @click="changePassword">
          <text class="sidebar-icon">🔒</text>
          <text class="sidebar-text">修改密码</text>
          <text class="sidebar-arrow">></text>
        </view>
        
        <view class="sidebar-item" @click="settings">
          <text class="sidebar-icon">⚙️</text>
          <text class="sidebar-text">设置</text>
          <text class="sidebar-arrow">></text>
        </view>
        
        <view class="sidebar-divider"></view>
        
        <view class="sidebar-item logout" @click="logout">
          <text class="sidebar-icon">🚪</text>
          <text class="sidebar-text">退出登录</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ContactAPI, MessageAPI } from '../utils/api'
import { AuthUtils, getUserStatusText } from '../utils/auth'

// 好友数据类型定义
interface Friend {
  userId: string
  email: string
  nickName: string
  avatar: string | null
  status: number
  friendSince: string
}

interface FriendGroup {
  letter: string
  contacts: Friend[]
}

// 好友申请数据类型定义
interface FriendRequest {
  id: string
  email: string
  nickName: string
  avatar: string | null
  message: string
  createdAt: string
}

// 搜索文本
const searchText = ref('')

// 新朋友数量
const newFriendsCount = ref(0)

// 好友列表数据
const friendsList = ref<Friend[]>([])
const loading = ref(false)
const error = ref('')

// 好友申请弹窗相关
const showFriendRequestModal = ref(false)
const friendRequests = ref<FriendRequest[]>([])
const requestsLoading = ref(false)

// 好友操作弹窗相关
const showFriendActionModal = ref(false)
const selectedFriend = ref<Friend | null>(null)
const actionModalPosition = ref({ x: 0, y: 0 })

// 侧边栏相关
const showSidebar = ref(false)



// 获取中文首字母（简单实现）
const getFirstLetter = (name: string) => {
  const firstChar = name.charAt(0)
  // 简单的中文首字母映射
  const pinyinMap: { [key: string]: string } = {
    '阿': 'A', '安': 'A', '艾': 'A',
    '白': 'B', '包': 'B', '北': 'B',
    '陈': 'C', '程': 'C', '崔': 'C',
    '大': 'D', '邓': 'D', '丁': 'D',
    '方': 'F', '冯': 'F', '付': 'F',
    '高': 'G', '郭': 'G', '顾': 'G',
    '韩': 'H', '何': 'H', '黄': 'H',
    '贾': 'J', '江': 'J', '金': 'J',
    '孔': 'K', '康': 'K',
    '李': 'L', '刘': 'L', '林': 'L',
    '马': 'M', '毛': 'M', '孟': 'M',
    '牛': 'N', '倪': 'N',
    '潘': 'P', '彭': 'P',
    '钱': 'Q', '秦': 'Q',
    '任': 'R', '阮': 'R',
    '孙': 'S', '宋': 'S', '苏': 'S',
    '唐': 'T', '田': 'T',
    '王': 'W', '吴': 'W', '魏': 'W',
    '徐': 'X', '许': 'X', '谢': 'X',
    '杨': 'Y', '叶': 'Y', '于': 'Y',
    '张': 'Z', '赵': 'Z', '周': 'Z'
  }
  
  return pinyinMap[firstChar] || firstChar.toUpperCase()
}
const openAddContact =()=>{
    uni.navigateTo({
    url: '/pages/add-friend'
  })
}
// 按字母分组的好友
const groupedContacts = computed(() => {
  const groups: { [key: string]: Friend[] } = {}
  
  friendsList.value.forEach(friend => {
    const letter = getFirstLetter(friend.nickName)
    if (!groups[letter]) {
      groups[letter] = []
    }
    groups[letter].push(friend)
  })
  
  // 按字母排序
  const sortedGroups = Object.keys(groups).sort().map(letter => ({
    letter,
    contacts: groups[letter].sort((a, b) => a.nickName.localeCompare(b.nickName))
  }))
  
  return sortedGroups
})

// 过滤后的好友
const filteredContacts = computed(() => {
  if (!searchText.value) {
    return groupedContacts.value
  }
  
  const filtered = groupedContacts.value.map(group => ({
    ...group,
    contacts: group.contacts.filter(friend => 
      friend.nickName.toLowerCase().includes(searchText.value.toLowerCase()) ||
      friend.email.toLowerCase().includes(searchText.value.toLowerCase())
    )
  })).filter(group => group.contacts.length > 0)
  
  return filtered
})

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

// 打开新朋友
const openNewFriends = async () => {
  showFriendRequestModal.value = true
  await loadFriendRequests()
}

// 打开群聊
const openGroupChats = () => {
  console.log('打开群聊')
  // 跳转到群聊列表页面
}

// 打开标签
const openTags = () => {
  console.log('打开标签')
  // 跳转到标签页面
}

// 获取好友列表
const loadFriends = async () => {
  try {
    loading.value = true
    error.value = ''
    
    const response = await ContactAPI.getFriends()
    if (response.code === 200 && response.data) {
      friendsList.value = response.data.friends || []
    }
  } catch (err: any) {
    console.error('获取好友列表失败:', err)
    error.value = err.message || '获取好友列表失败'
    uni.showToast({
      title: error.value,
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 打开联系人详情
const openContact = (friend: Friend, event?: any) => {
  // 如果点击的是同一个好友，切换显示状态
  if (selectedFriend.value?.userId === friend.userId && showFriendActionModal.value) {
    showFriendActionModal.value = false
    selectedFriend.value = null
  } else {
    // 否则显示新的下拉框
    selectedFriend.value = friend
    showFriendActionModal.value = true
  }
}



// 添加联系人
const addContact = () => {
  console.log('添加联系人')
  // 跳转到添加联系人页面
}

// 关闭好友操作弹窗
const closeFriendActionModal = () => {
  showFriendActionModal.value = false
  selectedFriend.value = null
}

// 发起聊天
const startChat = async (friend: Friend) => {
  console.log('发起聊天:', friend.nickName)
  closeFriendActionModal()
  
  try {
    // 显示加载提示
    uni.showLoading({
      title: '创建会话中...'
    })
    
    // 调用创建会话API
    const response = await MessageAPI.createConversation(friend.userId)
    
    uni.hideLoading()
    
    if (response.code === 200 && response.data?.conversation) {
      const conversation = response.data.conversation
      
      // 跳转到聊天页面，传递会话信息
      uni.navigateTo({
        url: `/pages/chat?conversationId=${conversation.id}&otherUserId=${friend.userId}&otherUserName=${encodeURIComponent(friend.nickName)}&otherUserAvatar=${encodeURIComponent(friend.avatar || '/static/logo.png')}`
      })
    } else {
      uni.showToast({
        title: response.message || '创建会话失败',
        icon: 'none'
      })
    }
  } catch (error: any) {
    uni.hideLoading()
    console.error('创建会话失败:', error)
    
    let errorMessage = '网络错误'
    if (error.message) {
      if (error.message.includes('非好友关系')) {
        errorMessage = '只能与好友发起聊天'
      } else if (error.message.includes('参数错误')) {
        errorMessage = '参数错误，请重试'
      } else {
        errorMessage = error.message
      }
    }
    
    uni.showToast({
      title: errorMessage,
      icon: 'none'
    })
  }
}

// 删除好友
const deleteFriend = async (friend: Friend) => {
  uni.showModal({
    title: '删除好友',
    content: `确定要删除好友 ${friend.nickName} 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用删除好友的API
          const response = await ContactAPI.deleteFriend(friend.email)
          
          if (response.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            
            // 从好友列表中移除
            friendsList.value = friendsList.value.filter(f => f.userId !== friend.userId)
            closeFriendActionModal()
          }
        } catch (err: any) {
          console.error('删除好友失败:', err)
          uni.showToast({
            title: err.message || '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 关闭好友申请弹窗
const closeFriendRequestModal = () => {
  showFriendRequestModal.value = false
}

// 加载好友申请列表
const loadFriendRequests = async () => {
  try {
    requestsLoading.value = true
    const response = await ContactAPI.getFriendRequests()
    if (response.code === 200 && response.data) {
      // 转换API响应数据格式
      const requests = response.data.requests.map((req: any) => ({
        id: req.id,
        email: req.fromUserEmail,
        nickName: req.fromUserNickName,
        avatar: req.fromUserAvatar,
        message: req.message,
        createdAt: req.requestTime
      }))
      friendRequests.value = requests
      // 更新新朋友数量
      newFriendsCount.value = requests.length
    }
  } catch (err: any) {
    console.error('获取好友申请失败:', err)
    uni.showToast({
      title: err.message || '获取好友申请失败',
      icon: 'none'
    })
  } finally {
    requestsLoading.value = false
  }
}

// 处理好友申请
const handleFriendRequest = async (requestId: string, action: 'accept' | 'reject') => {
  try {
    // 转换action为API期望的数字格式：1-同意，2-拒绝
    const actionCode = action === 'accept' ? 1 : 2
    const response = await ContactAPI.handleFriendRequest(requestId, actionCode)
    
    if (response.code === 200) {
      uni.showToast({
        title: action === 'accept' ? '已同意好友申请' : '已拒绝好友申请',
        icon: 'success'
      })
      
      // 从列表中移除已处理的申请
      friendRequests.value = friendRequests.value.filter(request => request.id !== requestId)
      // 更新新朋友数量
      newFriendsCount.value = friendRequests.value.length
      
      // 如果同意了申请，重新加载好友列表
      if (action === 'accept') {
        await loadFriends()
      }
    }
  } catch (err: any) {
    console.error('处理好友申请失败:', err)
    uni.showToast({
      title: err.message || '操作失败',
      icon: 'none'
    })
  }
}

// 格式化时间
const formatTime = (timeStr: string) => {
  const time = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - time.getTime()
  
  if (diff < 60000) {
    return '刚刚'
  } else if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return `${Math.floor(diff / 86400000)}天前`
  }
}

// 获取当前用户信息
const userInfo = computed(() => {
  return AuthUtils.getUserInfo()
})

// 用户头像
const userAvatar = computed(() => {
  return userInfo.value?.avatar || '/static/logo.png'
})

// 用户名
const userName = computed(() => {
  return userInfo.value?.nickName || '未知用户'
})

// 侧边栏功能函数
const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value
}

const closeSidebar = () => {
  showSidebar.value = false
}

const editProfile = () => {
  closeSidebar()
  uni.navigateTo({
    url: '/pages/profile'
  })
}

const changePassword = () => {
  closeSidebar()
  uni.navigateTo({
    url: '/pages/change-password'
  })
}

const settings = () => {
  closeSidebar()
  uni.navigateTo({
    url: '/pages/settings'
  })
}

const logout = () => {
  closeSidebar()
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        AuthUtils.logout()
        uni.reLaunch({
          url: '/pages/login'
        })
      }
    }
  })
}

// 页面加载时检查登录状态并获取好友列表
onMounted(async () => {
  // 检查登录状态
  if (!AuthUtils.isLoggedIn()) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    uni.reLaunch({
      url: '/pages/login'
    })
    return
  }
  
  // 获取好友列表
  await loadFriends()
  
  // 获取好友申请数量（不显示弹窗）
  try {
    const response = await ContactAPI.getFriendRequests()
    if (response.code === 200 && response.data) {
      newFriendsCount.value = response.data.requests.length
    }
  } catch (err) {
    console.error('获取好友申请数量失败:', err)
  }
})
</script>

<style scoped>
.contact-container {
  height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 个人信息栏 */
.header-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fafbfc;
  padding: 30rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #e5e5e5;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-avatar {
  margin-right: 24rpx;
}

.header-avatar .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: 3rpx solid #f0f0f0;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.header-right {
  display: flex;
  align-items: center;
}

.add-contact-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.add-contact-btn:active {
  transform: scale(0.95);
}

.add-icon {
  font-size: 32rpx;
  color: #007AFF;
  font-weight: bold;
  line-height: 1;
}

/* 搜索栏 */
.search-section {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
  margin-top: 140rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 16rpx 24rpx;
}

.search-icon {
  font-size: 28rpx;
  margin-right: 16rpx;
  color: #999999;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  background: transparent;
  border: none;
  outline: none;
}

.search-input::placeholder {
  color: #999999;
}

/* 功能入口 */
.function-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
}

.function-item:last-child {
  border-bottom: none;
}

.function-item:active {
  background-color: #f8f9fa;
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  font-size: 36rpx;
}

.function-icon.new-friends {
  background-color: #ff9500;
}

.function-icon.group-chats {
  background-color: #34c759;
}

.function-icon.tags {
  background-color: #007aff;
}

.function-text {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.function-badge {
  background-color: #ff3b30;
  border-radius: 20rpx;
  min-width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.badge-text {
  font-size: 22rpx;
  color: #ffffff;
  font-weight: bold;
  padding: 0 8rpx;
}

.arrow {
  font-size: 28rpx;
  color: #c7c7cc;
  font-weight: bold;
}

/* 加载状态 */
.loading-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}

/* 空状态 */
.empty-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 60rpx 30rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.empty-hint {
  font-size: 24rpx;
  color: #999999;
}

/* 联系人列表 */
.contact-list {
  flex: 1;
  background-color: #ffffff;
  overflow-y: auto;
}

.contact-group {
  margin-bottom: 0;
}

.group-header {
  background-color: #f8f9fa;
  padding: 12rpx 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.group-title {
  font-size: 24rpx;
  color: #666666;
  font-weight: 500;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
}

.contact-item:active {
  background-color: #f8f9fa;
}

.contact-avatar {
  margin-right: 24rpx;
  position: relative;
}

.contact-avatar .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.status-indicator {
  position: absolute;
  bottom: 2rpx;
  right: 2rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  border: 2rpx solid #ffffff;
}

.status-indicator.online {
  background-color: #52c41a;
}

.status-indicator.offline {
  background-color: #d9d9d9;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-name {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.contact-status {
  font-size: 24rpx;
  color: #999999;
  margin-top: 4rpx;
}

/* 好友操作下拉框 */
.contact-item {
  position: relative;
}

.action-dropdown {
  position: absolute;
  top: 100%;
  right: 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 280rpx;
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  transition: background-color 0.2s;
  border-bottom: 1rpx solid #f0f0f0;
}

.action-item:last-child {
  border-bottom: none;
}

.action-item:active {
  background-color: #f8f9fa;
}

.action-item.delete:active {
  background-color: #fff5f5;
}

.action-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
  width: 40rpx;
  text-align: center;
}

.action-text {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
}

.action-item.delete .action-text {
  color: #ff3b30;
}

/* 好友申请弹窗 */
.friend-request-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
}

.modal-content {
  background-color: #ffffff;
  border-radius: 20rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  transition: background-color 0.2s;
}

.close-btn:active {
  background-color: #f0f0f0;
}

.close-icon {
  font-size: 40rpx;
  color: #666666;
  line-height: 1;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
}

/* 加载状态 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx 30rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
}

/* 空状态 */
.empty-requests {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 30rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

/* 申请列表 */
.request-list {
  padding: 0;
}

.request-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.request-item:last-child {
  border-bottom: none;
}

.request-avatar {
  margin-right: 24rpx;
}

.request-avatar .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.request-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: 20rpx;
}

.request-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8rpx;
}

.request-email {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.request-message {
  font-size: 26rpx;
  color: #333333;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.request-time {
  font-size: 22rpx;
  color: #999999;
}

.request-actions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  min-width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-btn.accept {
  background-color: #007AFF;
}

.action-btn.accept:active {
  background-color: #0056CC;
}

.action-btn.reject {
  background-color: #f0f0f0;
}

.action-btn.reject:active {
  background-color: #e0e0e0;
}

.action-btn .btn-text {
  font-size: 26rpx;
  font-weight: 500;
}

.action-btn.accept .btn-text {
  color: #ffffff;
}

.action-btn.reject .btn-text {
  color: #333333;
}

/* 侧边栏样式 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.sidebar {
  position: fixed;
  top: 0;
  right: -600rpx;
  width: 600rpx;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: -4rpx 0 20rpx rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar-open {
  right: 0;
}

.sidebar-header {
  padding: 60rpx 40rpx 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
}

.sidebar-avatar {
  margin-right: 30rpx;
}

.sidebar-avatar .avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.sidebar-user-info {
  flex: 1;
}

.sidebar-username {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.sidebar-email {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-content {
  flex: 1;
  padding: 40rpx 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 32rpx 40rpx;
  transition: background-color 0.2s;
  border-bottom: 1rpx solid #f5f5f5;
}

.sidebar-item:active {
  background-color: #f8f9fa;
}

.sidebar-item.logout {
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

.sidebar-item.logout:active {
  background-color: #fff5f5;
}

.sidebar-icon {
  font-size: 36rpx;
  margin-right: 30rpx;
  width: 50rpx;
  text-align: center;
}

.sidebar-text {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.sidebar-item.logout .sidebar-text {
  color: #ff3b30;
}

.sidebar-arrow {
  font-size: 28rpx;
  color: #c7c7cc;
  font-weight: bold;
}

.sidebar-divider {
  height: 20rpx;
  background-color: #f8f9fa;
  margin: 20rpx 0;
}

</style>